

<template>
  <div style="height: 100%; width: 100%">
    <router-view v-if="route.meta.auth"></router-view>
    <div class="common-layout" v-else>
      <div><Header /></div>

      <el-container>
        <el-container>
          <LeftNavView></LeftNavView>
          <el-container style="height: 100%">
            <el-main style="height: 100%">
              <RouterView />
            </el-main>
            <el-footer class="footer">
              <p>{{ counterStore.footerTitle.one }}</p>
              <p style="text-align: end">{{ counterStore.footerTitle.tow }}</p>
            </el-footer>
          </el-container>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Sunny, Moon } from "@element-plus/icons-vue";
import { useDark, useToggle } from "@vueuse/core";
const props = defineProps({
  msg: String,
});
const isDark = useDark();

const toggleDark = useToggle(isDark);

//
import {
  defineComponent,
  ref,
  watch,
  reactive,
  onMounted,
  onUnmounted,
  provide,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import Header from "@/components/HeaderView.vue";
import LeftNavView from "@/components/LeftNavView.vue";
// 状态管理 pina  composition API模式
import { useCounterStore } from "@/stores/counter.js";
// composition API模式
const counterStore = useCounterStore();

const tokentoken = sessionStorage.getItem("token");
const userName = sessionStorage.getItem("userName");
// console.log(userName, "userNameuserName");
// console.log(tokentoken, "tokentokentokentokentokentoken");
// 水印
import { getmark } from "./utils/watermark";
const { watermark } = getmark();
onMounted(() => {
  watermark("yyds"); //水印名
});
onUnmounted(() => {
  watermark("");
});
// 侧边栏的展开收起
const isCollapse = ref(false);
//
provide("isCollapse", isCollapse);
// router是全局路由对象
const router = useRouter();
// 获取全部路由
const routerData = reactive(router.options.routes);

//标题
const title = ref(routerData[2].title);
console.log(router, routerData, "0980");

//
provide("title", title);

//route是当前路由
const route = useRoute();

// 处理登录页面的路由
console.log(routerData.slice(1, routerData.length), "，“999");

// 退出
const clickQuit = () => {
  sessionStorage.removeItem("token");
  // 路由跳转方法
  // router.replace("/");
  router.push("/");
};
</script>

<style lang="scss" scoped>
.el-header {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  background: #444;

  color: rgb(156, 162, 168);
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  // width: 200px;
  // min-height: 400px;
  // height: 50%;
  // flex: 1;
}

.common-layout {
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.footer {
  border-top: #444 solid 1px;
}
</style>



